<template>
  <div class="app-container">
    <!-- 顶部导航 -->
  
    <nav class="main-nav">
      <router-link v-for="item in navItems" :key="item.path" :to="item.path" class="nav-item" active-class="active">
        {{ item.title }}
      </router-link>
    </nav>

    <!-- 页面内容 -->
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const navItems = ref([
  { path: '/', title: '首页' },
  { path: '/movie', title: '电影' },
  { path: '/cinema', title: '影院' },
  { path: '/show', title: '演出' },
  { path: '/admin', title: '商城管理端' }
]);
</script>

<style scoped>
.app-container {
  max-width: 1280px;
  margin: 0 auto;
}

.main-nav {
  display: flex;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-item {
  padding: 0.8rem 1.5rem;
  margin-right: 1rem;
  color: #666;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-item:hover {
  background: #f5f5f5;
}

.nav-item.active {
  color: #fff;
  background: #4CAF50;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
/* eslint-disable */